<template>
	<view class="container">
		<cu-custom bgColor="bg-white">
			<block slot="content">产品服务</block>
		</cu-custom>
		<view class="product-list">
			<scroll-view class="left" scroll-y 
				:style="{ height: 'calc(100vh - ' + CustomBar + 'px)' }">
				<!-- <block v-for="(group, g_index) in 3" :key="g_index">
					<view class="cate-group">
						房屋维修
					</view>
					<block v-for="(cate, c_index) in g_index+1" :key="c_index">
						<view class="cate-item" :class="g_index==0&&c_index==0?'checked':''" 
							@tap="temp">
							防水补漏
						</view>
					</block>
				</block> -->
				<block v-for="cate in categoryList" :key="cate.id">
					<view class="cate-item" :class="cate.id==currentCate?'checked':''" 
						@tap="handlerCategoryChange(cate.id)">
						{{cate.name}}
					</view>
				</block>
			</scroll-view>
			<view class="right">
				<view class="right-header">
					<view class="search-box">
						<uni-icons type="search" size="20" color="rgb(144, 174, 157)"></uni-icons>
						<input class="search-input" type="text"
							v-model="keyword"
							placeholder="搜索您需要的服务" 
							placeholder-style="color: rgb(144, 174, 157)"
							@blur="downCallback"/>
					</view>					
				</view>
				<view class="" :style="{ height: 'calc(100vh - ' + CustomBar + 'px - 90rpx)' }">
					<mescroll-uni ref="mescrollRef" :down="downOption" :fixed="false"
						@down="downCallback" @up="upCallback" :up="upOption">
						<!-- <block v-for="(cate, c_index) in 5" :key="c_index">
							<view class="product-header">
								<view class="icon">
									<image src="/static/img/house_icon.png" mode="aspectFit"></image>
								</view>
								<view class="flex flex-direction">
									<text class="text-lg">地下室漏水维修</text>
									<text class="learn-btn" @tap="showInfo()">了解一下</text>
								</view>
							</view>
							<block v-for="(product, p_index) in c_index+1" :key="p_index">
								<view class="margin-sm product-card" @tap="$tools.to('/pages/product/detail')">
									<image src="/static/img/vip.png" mode="aspectFill"></image>
									<view class="product-info">
										<view class="text-xl line-slh">地下室接水</view>
										<view class="">
											<text class="text-red text-bold text-sm">￥</text>
											<text class="text-red text-bold text-xxl">998.00</text>
											<text class="margin-left-xs text-gray">/处</text>
										</view>
									</view>
								</view>
							</block>
						</block> -->
						<block v-for="(product, index) in productList" :key="index">
							<view class="margin-sm product-card" @tap="$tools.to('/pages/product/detail?id='+product.id)">
								<image :src="product.image" mode="aspectFill"></image>
								<view class="product-info">
									<view class="text-xl line-slh">{{product.title}}</view>
									<view class="">
										<text class="text-red text-bold text-sm">￥</text>
										<text class="text-red text-bold text-xxl">{{product.price}}</text>
										<text v-if="product.unit" class="margin-left-xs text-gray">/{{product.unit}}</text>
									</view>
								</view>
							</view>
						</block>
					</mescroll-uni>
				</view>
			</view>
		</view>
		
		<!-- <view class="cu-modal bottom-modal" :class="modalName=='info'?'show':''" @tap="hideModal">
			<view class="cu-dialog radius-top-sm bg-white" @tap.stop>
				<view class="product-header unshadow">
					<view class="icon">
						<image src="/static/tabbar/user01.png" mode="aspectFit"></image>
					</view>
					<view class="flex flex-direction">
						<text class="text-lg">地下室漏水维修</text>
					</view>
				</view>
				<view class="padding text-left product-content">
					快速处理地下室渗漏水问题
				</view>
				<view class="flex justify-center margin-lr-xl padding-tb padding-lr-xl">
					<button class="cu-btn bg-green round lg flex-sub" @tap="hideModal">回到产品</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { BASE_URL, getCategory, getGoods } from '@/common/api/auth.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				CustomBar: this.CustomBar,
				baseUrl: BASE_URL,
				modalName: '',
				categoryList: [],
				currentCate: 0,
				productList: [],
				keyword: '',
				downOption: {
					use: true,
					auto: false,
				},
				upOption: {
					auto: true,
					noMoreSize: 2,
					textNoMore: "没有更多了",
					page: {
						num: 0,
						size: 10,
					},
					empty: {
						icon: "/static/img/none.png",
						tip: "暂无此类服务",
					}
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				const that = this
				getCategory().then(res => {
					if(res&&res.code==1) {
						let data = res.data
						that.categoryList = data
						that.currentCate = that.categoryList[0].id
					}
				})
			},
			downCallback() {
				this.mescroll.resetUpScroll(true);
			},
			upCallback(page) {
				let params = {
					limit: page.size,
					page: page.num
				}
				params['category_id'] = this.currentCate
				if(this.keyword) {
					params['keyword'] = this.keyword
				}
				const that = this
				getGoods(params).then(res => {
					if(res&&res.code == 1) {
						let data = res.data
						that.mescroll.endBySize(data.data.length, data.total)
						if(page.num == 1) that.productList = []
						that.productList = data.data.map(item => {
							item.image = /^http(s)?:\/\/.+/.test(item.image)?item.image:that.baseUrl+item.image
							return item
						})
					}
				})
			},
			hideModal() {
				this.modalName = ''
			},
			showInfo() {
				this.modalName = 'info'
			},
			handlerCategoryChange(id) {
				if(id !== this.currentCate) {
					this.currentCate = id
					// this.keyword = ''
					this.downCallback()
				}
			},
			temp() {
				return this.$tools.msg("还没实现")
			}
		}
	}
</script>

<style scoped>
	.product-list {
		display: flex;
	}
	.product-list .left {
		position: relative;
		width: 28%;
		/* border-top-right-radius: 40rpx; */
		box-shadow: 2rpx 0 2rpx 2rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		z-index: 99;
	}
	.product-list .left .cate-group {
		background-color: rgb(0, 123, 70);
		color: #fff;
		font-size: 36rpx;
		font-weight: 700;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
	}
	.product-list .left .cate-item {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
	}
	.product-list .left .cate-item.checked {
		color: rgb(0, 123, 70);
		border-left: 6rpx solid rgb(0, 123, 70);
		font-weight: 700;
	}
	.product-list .right {
		width: 72%;
	}
	.product-list .right .right-header {
		padding: 0 20rpx;
		background-color: rgb(243, 243, 243);
		height: 90rpx;
		display: flex;
		align-items: center;
	}
	.product-list .right .right-header .search-box {
		flex: 1;
		padding: 0 10rpx;
		background-color: #fff;
		display: flex;
		height: 50rpx;
		align-items: center;
		border-radius: 999999rpx;
		box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
	}
	.product-list .right .right-header .search-box .search-input {
		padding: 0 10rpx;
		height: 52rpx;
		line-height: 52rpx;
		font-size: 28rpx;
	}
	.product-header {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		height: 130rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 2rpx 2rpx rgb(215, 224, 219);
	}
	.product-header .icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: rgba(0, 123, 70); */
		background-image: linear-gradient(rgba(67, 172, 112, 1), rgba(14, 131, 76, 1));
		margin-right: 20rpx;
	}
	.product-header .icon image {
		width: 46rpx;
		height: 46rpx;
	}
	.product-list .right .product-header .learn-btn {
		color: rgba(0, 123, 70);
		font-size: 30rpx;
		margin-top: 4rpx;
	}
	.product-list .right .product-card {
		border-radius: 16rpx;
		height: 426rpx;
		box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
		overflow: hidden;
	}
	.product-list .right .product-card image {
		width: 100%;
		height: 300rpx;
	}
	.product-list .right .product-card .product-info {
		padding: 0 20rpx 20rpx;
		height: calc(426rpx - 300rpx);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.unshadow {
		box-shadow: none;
	}
	.product-content {
		min-height: 30vh;
	}
</style>